import { defineComponent } from "vue";
import style from "./index.module.less";
import PageTitle from "@/components/PageTitle";
import view1 from "./view/view1";
import { Tab, Tabs } from "vant";
import view2 from "./view/view2";
import view3 from "./view/view3";
import view4 from "./view/view4";
import view5 from "./view/view5";
export default defineComponent({
  name: "",
  setup() {
    return () => {
      const data = [
        {
          title: "常用item组件",
          view: view1,
        },
        {
          title: "基础组件",
          view: view2,
        },
        {
          title: "表单组件",
          view: view3,
        },
        {
          title: "地图组件",
          view: view4,
        },
        {
          title: "图表组件",
          view: view5,
        },
      ];
      return (
        <PageTitle title="组件演示">
          <Tabs>
            {data.map((e) => {
              const Com = e.view as any;
              return (
                <Tab title={e.title}>
                  <div
                    class="overflow-y-scroll flex flex-1 flex-col"
                    style={{
                      maxHeight: "calc(100vh - 100px)",
                      paddingBottom: "50px",
                    }}
                  >
                    <Com />
                  </div>
                </Tab>
              );
            })}
          </Tabs>
        </PageTitle>
      );
    };
  },
});
